<template>
	<view class="content" :style="boxTopStyle">
		<u-navbar
			title=""
			:autoBack="true"
			bgColor='rgba(0,0,0,0)'
			leftIconColor="#fff"
		>
		</u-navbar>
		<image src="/static/title.png" mode="widthFix" class="header"></image>
		<view class="list">
			<view class="item" v-for="item in state.list" :key="item.id">
				<view class="title">{{item.name}}</view>
				<view class="text indent3" v-if="item.contact">联系人 : {{item.contact}}</view>
				<view class="text" v-if="item.phone">电话 : <text class="phoneText" v-for="(it,index) in handlePhone(item.phone)" :key="index" @click="callPhone(it)">{{it}}</text></view>
				<view class="text" v-if="item.mobile">手机 : <text class="phoneText" v-for="(it,index) in handlePhone(item.mobile)" :key="index" @click="callPhone(it)">{{it}}</text></view>
				<view class="text" v-if="item.fax">传真 : {{item.fax}}</view>
				<view class="text" v-if="item.address">地址 : {{item.address}}</view>
			</view>
		</view>
		<safeBottom></safeBottom>
	</view>
</template>

<script setup>
import { reactive, computed, onMounted } from 'vue';
import { onReachBottom } from '@dcloudio/uni-app'
import request from '@/utils/request.js'
	const state = reactive({
		menuBtnSize: '',
		list: [],
		isEnd:false,
		loading: false,
		params: {
			page: 0,
			count: 10
		},
	})
	const callPhone = item => {
		uni.makePhoneCall({
			phoneNumber: item
		})
	}
	const handlePhone = str => {
		try {
			return str.split('，')
		}
		catch(e){
			//TODO handle the exception
			return [str]
		}
	}
	const getConfig = () => {
		state.loading = true;
		request({
			url:'api/home/businessList',
			data: state.params,
		}).then(res => {
			if(state.params.page === 0) {
				state.list = res;
			}else {
				state.list = [...state.list,...res]
			}
			state.isEnd = res.length < state.params.count;
			if(!state.isEnd) state.params.page++;
			state.loading = false;
		}).catch(err => {
			state.loading = false;
		})
	}
	getConfig()
	// 搜索栏高度
	const boxTopStyle = computed(() => {
		if(!state.menuBtnSize) {
			return ''
		}else {
			const { top, height } = state.menuBtnSize;
			return {
				paddingTop: `${top + height + 5}px`
			}
		}
	})
	onMounted(() => {
		// #ifdef MP-WEIXIN
		state.menuBtnSize = uni.getMenuButtonBoundingClientRect()
		// #endif
	})
	onReachBottom(() => {
		if(state.isEnd || state.loading) return;
		getConfig()
	})
</script>

<style lang="scss" scoped>
.content {
	padding: 30rpx;
	background-color: $main-color;
	min-height: 100vh;
	.header {
		width: 100%;
		height: 200rpx;
	}
	.list {
		padding: 30rpx;
		.item {
			&+.item {
				margin-top: 30rpx;
			}
			.title {
				font-size: 34rpx;
				color: #f8f22b;
				font-weight: 600;
				margin-bottom: 10rpx;
			}
			.text {
				color: #333;
				font-size: 26rpx;
				color: #fff;
				padding-left: 2.5em;
				text-indent: -2.5em;
				&+.text {
					margin-top: 5rpx;
				}
				.phoneText {
					&+.phoneText {
						&::before {
							content: '，';
						}
					}
				}
			}
		}
	}
}
</style>
